import { Text, View,TouchableOpacity,StyleSheet,Modal} from "react-native";
import React, { Component } from 'react';
import {inject,observer } from "mobx-react";
import ImageViewer from 'react-native-image-zoom-viewer';
import Icon from 'react-native-vector-icons/MaterialIcons';
import axios from "axios";

@inject("rootStore") // 注入 用来获取 全局数据的
@observer //  当全局发生改变了  组件的重新渲染 从而显示最新的数据
class Result extends Component{
    constructor(props) {
        super(props);
        this.state = {
          showPng: false,
          images: [],
        };
    }

    closeModal = async() => {
        try{
            res=await axios.get(this.props.rootStore.ip+'/rmimg')
            this.setState({ showPng: false });
            }catch (error) {
                console.error('删除特征点图片失败', error);
                Alert.alert('删除特征点图片失败：', "请检查网络，或联系技术人员查看后端程序！");
            }
    };

    openModal = async () => {
        try {
            res = await axios.get(this.props.rootStore.ip + "/gettzd");
            if (res.data.code === 200) {
                data = res.data.data;
                data.forEach((item) => {
                    item.url = this.props.rootStore.ip + item.url + '?timestamp=' + new Date().getTime();
                });
                this.setState({ images: data, showPng: true });
            }
        } catch (error) {
            console.error("查看特征点图片失败", error);
            Alert.alert(
                "查看特征点图片失败：",
                "请检查网络，或联系技术人员查看后端程序！"
            );
        }
    };
    
    

    render(){
        const { showPng, images } = this.state;
        return( 
                <View style={{flex: 1, alignItems: 'center'}}>
                    <View>
                        <Text style={{fontSize: 40, fontWeight: 'bold',color:"black",marginTop:80}}>鉴定结果</Text>
                    </View>
                    <View
                        style={styles.line}
                        />
                    <View style={{marginTop:20,width:300}}>
                        <Text style={{fontSize: 20}}>{this.props.rootStore.tOrf}</Text>
                        <Text style={{fontSize: 20,marginTop:20}}>{this.props.rootStore.point}</Text>
                    </View>
                    <View style={{marginTop:50,alignItems: 'center' }}>
                        <TouchableOpacity
                            style={styles.goJpg}
                            onPress={this.openModal} 
                            activeOpacity={0.8}
                        >
                            <Text style={styles.text}>查看特征点图片</Text>
                        </TouchableOpacity>
                    </View>
                    <Modal visible={showPng} transparent={true}>
                        <View style={styles.container}>
                            <TouchableOpacity style={styles.closeButton} onPress={this.closeModal}>
                                <Icon name="close" size={30} color="#fff" />
                            </TouchableOpacity>
                            <ImageViewer
                            imageUrls={images}
                            saveToLocalByLongPress={false}
                            onCancel={this.closeModal}
                            />
                        </View>
                    </Modal>
                </View>
        )
    }
}

const styles=StyleSheet.create({
    goJpg:{
        marginTop:20,
        height: 50, 
        width: 300,
        backgroundColor:"#1da1f2",
        borderRadius: 20, // 边框圆角半径
        justifyContent: 'center', // 将文本内容水平居中
    },
    text:{
        textAlign: 'center', 
        fontSize: 20, 
        color: "#ffffff"
    },
    line:{
        height:1,
        width:300,
        borderWidth: 2, // 边框宽度
        borderColor: '#b8b8b8', // 边框颜色
    },
    container: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.9)',
    },
    closeButton: {
    position: 'absolute',
    top: 30,
    left: 20, // 修改为左上角
    zIndex: 1,
    },
})

export default Result